<!--
  ~ Copyright 2022 Scheer PAS Schweiz AG
  ~
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  imitations under the License.
  -->

<div
  class="summary"
  *ngIf="contract!.api.status !== 'Retired'; else apiRetired">
  <div class="endpoints">
    <div class="api-endpoint">
      <div>
        <mat-icon
          id="api-endpoint-icon"
          class="form-field-pre-icon"
          color="primary"
          >public</mat-icon
        >
      </div>
      <div>
        <mat-form-field>
          <input
            id="api-endpoint-input"
            matInput
            readonly
            value="{{ contract!.managedEndpoint }}" />
          <button
            id="api-endpoint-copy-btn"
            [cdkCopyToClipboard]="contract!.managedEndpoint"
            mat-icon-button
            matSuffix
            class="input-icon-btn">
            <mat-icon id="api-endpoint-copy-btn-icon" color="primary"
              >content_copy</mat-icon
            >
          </button>
        </mat-form-field>
      </div>
    </div>
    <div class="api-key">
      <div>
        <mat-icon id="api-key-icon" class="form-field-pre-icon" color="primary"
          >vpn_key</mat-icon
        >
      </div>
      <div>
        <mat-form-field>
          <input
            id="api-key-input"
            matInput
            readonly
            value="{{ contract!.client.apikey }}" />
          <button
            id="api-key-copy-btn"
            [cdkCopyToClipboard]="contract!.client.apikey"
            mat-icon-button
            matSuffix
            class="input-icon-btn">
            <mat-icon
              id="api-key-copy-btn-icon"
              class="input-icon-btn"
              color="primary"
              >content_copy</mat-icon
            >
          </button>
        </mat-form-field>
      </div>
    </div>
    <div class="auth-endpoint" *ngIf="hasOAuth">
      <div>
        <mat-icon class="form-field-pre-icon" color="primary">public</mat-icon>
      </div>
      <div>
        <mat-form-field>
          <input
            matInput
            readonly
            value="https://localhost:4200/authentication" />
          <button
            [cdkCopyToClipboard]="''"
            mat-icon-button
            matSuffix
            class="input-icon-btn">
            <mat-icon class="input-icon-btn" color="primary"
              >content_copy</mat-icon
            >
          </button>
        </mat-form-field>
      </div>
    </div>
    <div class="auth-key" *ngIf="hasOAuth">
      <div>
        <mat-icon class="form-field-pre-icon" color="primary">vpn_key</mat-icon>
      </div>
      <div>
        <mat-form-field>
          <input matInput readonly value="fer87)/9&9gdea" />
          <button
            [cdkCopyToClipboard]="''"
            mat-icon-button
            matSuffix
            class="input-icon-btn">
            <mat-icon class="input-icon-btn" color="primary"
              >content_copy</mat-icon
            >
          </button>
        </mat-form-field>
      </div>
    </div>
    <div class="view-docs" *ngIf="contract && contract.docsAvailable">
      <app-api-documentation-buttons
        [contract]="contract"
        [downloadEnabled]="true"></app-api-documentation-buttons>
    </div>
  </div>
  <div *ngIf="contract!.policies.length > 0; else noPolicies" class="policies">
    <ng-container *ngFor="let policy of contract!.policies">
      <app-policy-card-light
        [policy]="policy"
        [contract]="contract"
        (sectionChanged)="sectionChanged($event)"></app-policy-card-light>
    </ng-container>
  </div>

  <!-- No policies found for this API -->
  <ng-template #noPolicies>
    <app-no-data
      class="grid-center"
      [textClass]="'text-big2'"
      [text]="'CLIENTS.NO_POLICIES_FOR_API' | translate"></app-no-data>
  </ng-template>
</div>
<ng-template #apiRetired>
  <app-no-data
    class="dp-center"
    style="display: grid"
    [textClass]="'text-big3'"
    [text]="'CLIENTS.RETIRED_API' | translate">
  </app-no-data>
</ng-template>
